<template>
  <div class="details">
    <NavBar title="详情" left-arrow @click-left="back">
      <template #right>
        <Icon name="search" size="18" />
      </template>
    </NavBar>
    <div class="deta_top_name">
      <div class="deta_title">
        <p>{{details.title}}</p>
        <p>
          <Icon @click="onLike" color="orange" :name="this.iconname" />
        </p>
      </div>
      <div class="deta_sale_type" v-if="details.price == 0">免费</div>
      <div class="deta_sale_type" v-else>￥{{details.price}}</div>
      <div class="date_total">共{{details.total_periods}}课时&nbsp;|&nbsp;{{details.sales_num}}人以报名</div>
      <div class="date_start">开课时间:{{details.start_play_date}}&nbsp;-&nbsp;{{details.end_play_date}}</div>
    </div>
    <div class="data_conter_title">
      <div class="title_top">教学团队</div>
      <div class="title_box">
        <img :src="teachersList.avatar" alt />
        <p>{{teachersList.teacher_name}}</p>
      </div>
    </div>
    <div class="kc_introduce">
      <div class="kc_title">
        课程介绍
        <p class="statement">{{details.course_statement}}</p>
      </div>
    </div>
    <div class="kc_outline">
      <div class="kc_title">
        课程大纲
        <p v-for="(item,index) in dagang" :key="index">
          <span>{{item.periods_title}}</span>
          <span>开课时间：{{item.start_play}}</span>
        </p>
      </div>
    </div>
    <div class="kc_comment">
      <div class="kc_title">
        课程评论
        <div class="pinglun" v-for="(item,index) in pList" :key="index">
          <div>
            <img :src="item.avatar" alt />
          </div>
          <div>
            <p>
              <span>用户:{{item.nickname}}</span>
              <span class="star">
                <Rate
                  v-model="value"
                  :size="12"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                />
              </span>
            </p>
            <p class="con">{{item.content}}</p>
          </div>
          <div class="time">{{item.created_at*1000 | filTime}}</div>
        </div>
      </div>
    </div>
    <div>
      <button class="submit" @click="onSubmit">立即报名</button>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon, Rate, Toast } from "vant";
import {
  details,
  daGang,
  pingLun,
  getLike,
  delLike,
  getOrder,
} from "../../https/https";
export default {
  components: {
    NavBar,
    Icon,
    Rate,
  },
  data() {
    return {
      details: [],
      teachersList: [],
      dagang: [],
      pList: [],
      value: 5,
      iconname: null,
      shoucang: null,
      shoucangNab: null,
      id: 0,
    };
  },
  mounted() {
    this.id = this.$route.query.basis_id;
    details(this.id).then((res) => {
      console.log(res);
      if (res.info.is_collect == 1) {
        this.iconname = "star";
        this.shoucang = 1;
        getLike({ course_basis_id: this.id, type: 1 }).then((res) => {
          console.log(res);
          this.shoucangNab = res;
          this.shoucang = 1;
        });
      } else {
        this.iconname = "star-o";
        this.shoucang = 2;
      }
      this.details = res.info;
      this.teachersList = res.teachers[0];
    });

    daGang({
      id: this.id,
    }).then((res) => {
      this.dagang = res;
    });
    pingLun({
      id: this.id,
    }).then((res) => {
      this.pList = res.list;
    });
  },
  methods: {
    onSubmit() {
      getOrder({
        shop_id: this.id,
        type: 5,
      }).then((res) => {
        console.log(res);
        if (res.order_status == 2) {
          Toast.success("已报名");
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    onLike() {
      console.log(this.id);
      console.log(this.shoucang);
      if (this.shoucang == 1) {
        delLike(this.shoucangNab).then((res) => {
          console.log(res);
          this.shoucang = 2;
          this.iconname = "star-o";
          Toast.success("取消收藏");
        });
      } else if (this.shoucang == 2) {
        getLike({
          course_basis_id: this.id,
          type: 1,
        }).then((res) => {
          console.log(res);
          this.shoucangNab = res;
          this.shoucang = 1;
          this.iconname = "star";
          Toast.success("已收藏");
        });
      }
    },
  },
  filters: {
    filTime(value) {
      // console.log(time);
      var time = new Date(value);
      function timeAdd0(str) {
        if (str < 10) {
          str = "0" + str;
        }
        return str;
      }
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        timeAdd0(m) +
        "-" +
        timeAdd0(d) +
        "" +
        timeAdd0(h) +
        ":" +
        timeAdd0(mm) +
        ":" +
        timeAdd0(s)
      );
    },
  },
};
</script>

<style scoped>
.submit {
  width: 100%;
  height: 50px;
  color: #fff;
  background-color: #eb6100;
  border: 1px solid #eeeeee;
  position: fixed;
  bottom: 50px;
}
.statement {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinglun {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: relative;
  border-bottom: 1px solid #eee;
}
.star {
  margin-left: 10px;
}
.con {
  color: #999;
}
.time {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
  position: absolute;
  right: 10px;
  top: 5px;
}
.pinglun > div:nth-child(2) {
  font-size: 12px;
}
.pinglun > div:nth-child(2) > p {
  height: 25px;
  margin-left: 10px;
  line-height: 25px;
  display: flex;
  justify-content: space-between;
}
.pinglun img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.details {
  padding-bottom: 100px;
  background-color: #eeeeee;
}
.deta_top_name {
  width: 100%;
  height: 160px;
  background-color: #fff;
  overflow: hidden;
}
.deta_title {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
}
.deta_title > p:nth-child(1) {
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deta_title > p {
  font-size: 16px;
}
.deta_sale_type {
  font-size: 17px;
  font-weight: 500;
  color: #eb6100;
}
.date_total,
.date_start {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.45);
}
.deta_title,
.deta_sale_type,
.date_total,
.date_start {
  padding-left: 15px;
  margin-top: 15px;
}
.title_top {
  font-size: 16px;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 20px;
}
.data_conter_title {
  width: 100%;
  height: 145px;
  background-color: #fff;
  margin-top: 15px;
}
.title_box {
  padding-left: 30px;
}
.title_box > p {
  width: 45px;
  text-align: center;
  color: #333333;
}
.title_box > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.kc_introduce {
  width: 100%;
  height: 65px;
  background-color: #fff;
  margin-top: 15px;
}
.kc_title {
  font-size: 16px;
  color: #000000;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
.kc_title > p {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
}
.kc_title > p > span:nth-child(2) {
  margin-left: 20px;
  color: orange;
}
.kc_outline {
  width: 100%;
  min-height: 65px;
  background-color: #fff;
  margin-top: 15px;
}
.kc_comment {
  width: 100%;
  min-height: 65px;
  background-color: #fff;
  margin-top: 15px;
}
</style>